<template>
	<view class="card">
		<swiper class="card-lunbo" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="banner in currentInfo.category.bannerUrlList" :key="banner">
				<image :src="banner" mode=""></image>
			</swiper-item>
		</swiper>
		<view>{{currentInfo.category.name}}</view>
		<view>{{currentInfo.category.frontDesc}}</view>
		<view class="card-content">
			<view class="content-item" v-for="item in currentInfo.itemList" :key="item.id">
				<image class="item-img" :src="item.primaryPicUrl" mode=""></image>
				<text>{{item.name}}</text>
				<text>价格: {{item.counterPrice?item.counterPrice:'未上市'}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default {
		name: 'Card',
		props:{
			currentId:{
				type:Number,
				required:true,
				default:0
			}
		},
		mounted(){
			this.getHomeCardListData()
		},
		computed:{
			...mapState('home',['cardList']),
			currentInfo(){
				return this.cardList.find(item=>item.category.parentId  === this.currentId)
			}
		},
		methods:{
			...mapActions('home',['getHomeCardListData']),
			// getHomeCardData(){
			// 	this.getHomeCardListData()
			// }
		}
		// onLoad(){
		// 	console.log(99996666)
		// }
	}
</script>

<style lang="stylus">
	.card 
		text-align: center
		.card-lunbo
			image 
				width: 100%;
				height: 350upx;
		.card-content 
			display: flex
			flex-wrap: wrap
			.content-item 
				display: flex 
				flex-direction: column
				align-items: flex-start
				width: 50%;
				padding:0 20upx
				box-sizing: border-box
				text-align: left
				image 
					width: 100%;
					height: 300upx;
</style>